<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> methods 和 computed </title>
    <script src="https://unpkg.com/vue@next" ></script>
    <style>

    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
        data(){
            return{
                message:'jspang.com', 
                price:10,
                count:2
            }
        },
        computed:{                                //this 都是指向当前组件实例的 
            total(){
                return this.price * this.count    //计算属性不是有个方法 不加括号   
            }                                     //对于任何包含响应式数据的复杂逻辑 都应该使用计算属性   
        },

        methods:{
            handleItemClick(){
               this.message = this.message=='jspang.com'?'技术胖':'jspang.com'
            },
            getTotal(){
                return this.price*this.total  //在methods中只要修改变化后 会重新渲染的 页面重新渲染 方法会重新触发的
            }
        },


        template:`
            <h2> {{message}}</h2>
            <h1>computed总价  {{total}} </h1> 
            <i>  methods总价    {{getTotal()}}</i>
        `
    }) 
    const vm=app.mount("#app")
//  方法methods：                       只要页面重新渲染，就会重新执行方法  性能问题 
//  计算属性computed:                   当计算属性依赖的内容发生变更时，才会重新执行计算  []
//  computed和methods都能实现的功能      建议使用computed 因为有缓存 不用渲染

   
</script>
</html>